import React, {useState} from 'react';
import {Form,Input,Button,message} from "antd";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import styles from "./index.module.less";
import {useNavigate} from "react-router-dom";
import {useDispatch} from "react-redux";
import {postLoginAsync1, postLoginAsync2, useSelectorAuth} from "@/store/slice/auth";
import store from "@/store";
import {useAppDispatch} from "@/hooks";
function Login() {
    const navigate = useNavigate();
    // 补充：
    // let str:(string | number) = 1;
    // type TStr = typeof str;
    // let str1:TStr = 2;

    // 1- 通过useDispatch获得dispatch方案1
    // type TDispatch = typeof store.dispatch;
    // const dispatch = useDispatch<TDispatch>();

    // 2- 通过useDispatch获得dispatch方案2
    const dispatch = useAppDispatch();

    // const [isLoading,setIsLoading] = useState<boolean>(false);
    const {isLoading} = useSelectorAuth();
    const submitHandler = async (values:any)=>{
        // setIsLoading(true);
        // 1- store.dispatch执行的是一个异步action,建议使用await
        // const result = store.dispatch(postLoginAsync1(values));
        // console.log(result);

        // 建议使用await
        // const result:any = await store.dispatch(postLoginAsync1(values));
        // message.success(result.message)
        // navigate("/");

        // 2- useDispatch
        // try{
        //     const result:any = await dispatch(postLoginAsync1(values));
        //     message.success(result.message)
        //     navigate("/");
        // }catch (err){
        //     setIsLoading(false);
        // }

        // 3-扩展
        const result = await dispatch(postLoginAsync2(values));
        if(result.type === "aaaa/fulfilled"){
            navigate("/")
        }





    }
    return (
        <div className={styles.login}>
            <div>
                <h1>尚医通管理系统</h1>
                <Form
                    name="normal_login"
                    className="login-form"
                    onFinish={submitHandler}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入管理员账号' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入管理员账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入管理员密码！' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入管理员密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button loading={isLoading} type="primary" htmlType="submit" className="login-form-button">
                            登陆
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;